'use client'

import Links from '@/app/components/links'
import Link from 'next/link'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'

export default function Page() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()

  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString())
    params.set('sort', sortOrder)
    window.history.pushState(null, '', `?${params.toString()}`)
  }
  function switchLocale(locale: string) {
    const newPath = `/${locale}${pathname}`
    window.history.replaceState(null, '', newPath)
  }

  return (
    <>
      <Link href='/dashboard'>Dashboard</Link>

      <h1>检查url激活地址</h1>
      <Links />

      <h1>编程式导航</h1>
      <button type='button' onClick={() => router.push('/dashboard')}>
        Dashboard
      </button>

      <h1>跳转后不滚动</h1>
      <Link href='/dashboard' scroll={false}>
        Dashboard
      </Link>

      <h1>本机历史API</h1>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>

      <button onClick={() => switchLocale('en')}>English</button>
      <button onClick={() => switchLocale('fr')}>French</button>
    </>
  )
}
